<template>
  <!--  标题栏-->
  <div data-title style="display: flex;width: 100%;height: 45px;padding-bottom: 20px;justify-content: space-between">
    <div style="display: flex;height: 45px;width: 50%">
      <span style="width: 50px;line-height: 30px">{{ $t('message.articleTitle') }}：</span>
      <div style="width: 40%">
        <el-input size="small" v-model="title_input"></el-input>
      </div>
    </div>
    <div style="padding-right: 20px;">
      <el-button type="primary" size="small" @click="sendBtn">{{ $t('message.releaseBtn') }}</el-button>
    </div>
  </div>
  <!--  文章编辑框-->
  <div style="display: flex;justify-content: space-between">
    <div :style="editWidth" style="position: relative;display: flex">
      <v-md-editor
          v-model="content"
          :disabled-menus="imageList"
          @upload-image="UploadImage"
          mode="edit"
          :tab-size="4"
          :autofocus="true"
          :toc-nav-position-right="true"
          @copy-code-success="handleCopyCodeSuccess"
          @save="saveBtn"
          height="500px"
      ></v-md-editor>
      <div class="hideBtn"
           @click="cancelBtn">
        <el-icon v-if="sidebarStatus === SidebarHide">
          <arrow-left/>
        </el-icon>
        <el-icon v-else>
          <arrow-right/>
        </el-icon>
      </div>
    </div>
    <!--    工具栏-->
    <div
        :style="sidebarStatus"
        style="border-radius: 10px;"
    >
      <div style="display: flex;justify-content: center;min-width: 255px">
        <div style="height: 60px;min-width: 255px">
          <span style="min-width: 60px">分类：</span>
          <el-select size="small" v-model="ArticleSort" placeholder="选择分类"
          style="margin-top: 10px"
          >
            <el-option
                v-for="item in menuList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
      </div>
    </div>
  </div>

</template>

<script>
import ArticleCreate from "./ArticleCreate.js";
import {ArrowRight, ArrowLeft} from "@element-plus/icons";

export default {
  name: "ArticleCreate",
  components: {ArrowRight, ArrowLeft},
  setup() {
    return {
      ...ArticleCreate()
    }
  }
}
</script>

<style scoped>
.hideBtn {
  position: absolute;
  right: -18px;
  background: #ccc;
  display: flex;
  align-items: center;
  height: 100%;
  border-radius: 5px;
  cursor: pointer;
}

.hideBtn:hover {
  background: rgba(107, 107, 107, 0.44);
}
</style>